<!DOCTYPE html>
<html>
<head>
    <title><%=title%></title>
    <% include common/top.html %>
    <link rel='stylesheet' href='/pc/js/libs/bootstrap-sweetalert/sweetalert.css'/>
    <link rel='stylesheet' href='/pc/css/shop.css'/>
    <script src='/pc/js/shop.js'></script>
</head>
<body>
<!--大部分页面基于前端渲染，对于少数使用后端渲染页面的时候，配置partials，同时在这边引入content部分-->
    <% include common/header.html %>
    <div class="content container"  v-cloak>
        <div class="panel panel-info">
            <div class="panel-heading">店铺信息</div>
            <div class="panel-body">
                <div class="row">
                    <label class="col-xs-2">店铺名称</label>
                    <div class="col-xs-10">
                        {{shop.shop_name}}
                    </div>
                </div>
                <div class="row">
                    <label class="col-xs-2">店铺描述</label>
                    <div class="col-xs-10">
                        {{shop.shop_desc}}
                    </div>
                </div>
                <div class="row">
                    <label class="col-xs-2">联系电话</label>
                    <div class="col-xs-10">
                        {{shop.phone}}
                    </div>
                </div>
                <div class="row">
                    <label class="col-xs-2">店铺地址</label>
                    <div class="col-xs-10">
                        {{shop.address}}
                    </div>
                </div>
                <div class="row">
                    <label class="col-xs-2">起送金额</label>
                    <div class="col-xs-10">
                        {{shop.least_price_send}}元
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-info">
            <div class="panel-heading">菜单</div>
            <div class="panel-body">
                <form action="/order">
                    <table class="table table-hover" v-if="shop.dishes.length">
                        <thead>
                            <tr>
                                <td>#</td>
                                <td>名称</td>
                                <td>描述</td>
                                <td>价格</td>
                                <td>数量</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr  v-for="dish in shop.dishes">
                                <td><input type="checkbox" class="checkbox" value="{{$index}}" v-model="selectItem"></td>
                                <td>{{dish.name}}<input type="hidden" name="dish[{{$index}}][name]" value="{{dish.name}}"></td>
                                <td>{{dish.desc}}</td>
                                <td>{{dish.price|currency}}元<input type="hidden" name="dish[{{$index}}][price]" value="{{dish.price|currency}}"></td>
                                <td>
                                    <div class="input-group compute">
                                        <div class="input-group-addon" @click="reduce($index)">-</div>
                                            <input class="form-control" type="text" v-model="dish.num">
                                        <div class="input-group-addon"  @click="add($index)">+</div>
                                    </div>
                                    <input type="hidden" name="dish[{{$index}}][num]" value="{{dish.num}}">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <p>件数合计：{{totalNum}}<input type="hidden" name="totalNum" value="{{totalNum}}"></p>
                    <p>价格合计：{{totalPrice|currency}}<input type="hidden" name="totalPrice" value="{{totalPrice}}"></p>
                    <input type="hidden" name="userId" value="{{userBaseInfo._id}}">
                    <input type="hidden" name="shopId" value="{{shop._id}}">
                    <p><button class="btn btn-primary" @click="submit" type="submit">下单</button></p>
                </form>
            </div>
        </div>
        <div class="panel panel-info">
            <div class="panel-heading">评论</div>
            <div class="panel-body">
                <ul>
                    <li v-for="comment in comments">
                        <div class="comment_content">{{comment.content}}</div>
                    </li>
                </ul>
                <textarea class="form-control" rows="3" v-model="comment"></textarea>
                <p style="margin-top:5px;text-align:right"><button class="btn btn-default" @click.prevent="commentSubmit">提交</button></p>
            </div>
        </div>
    </div>
</body>
</html>